<template>
  <div id="category-result">
    <div id="category-header">
      Category: <span>{{category}}</span>
    </div>
    <PostList :posts="list"/>
  </div>
</template>

<script>
import PostList from './PostList'
import docMan from '../docMan'

export default {
  name: 'Category',
  components: {PostList},
  computed: {
    category () {
      return this.$route.params[0].replace(new RegExp(`^${docMan.root}/`), '')
    }
  },
  data () {
    return {
      list: {}
    }
  },
  beforeMount () {
    docMan.file(this.$route.params[0]).then(data => {
      this.list = data
    })
  },
  watch: {
    $route (to) {
      docMan.file(to.params[0]).then(data => {
        this.list = data
      })
    }
  }
}
</script>
<style lang="less">
  #category-header {
    margin: 15px 0;
    font-size: 1.6rem;
    color: #888;
    background-color: #faf8f8;
    padding: 10px 5px;

    > span {
      font-size: 2rem;
      color: #444;
      padding: 2px 15px;
    }
  }
</style>
